<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    

    <title>JavaScript基础知识总结2 | yale前端技术博客</title>
    <meta name="author" content="Yale">
    
    <meta name="description" content="想要真正弄懂javascript，那么就需要对javascript的两条链有清晰的认识，即作用域链与原型链，下面就对作用域链和原型链进行探讨…">
    
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta property="og:title" content="JavaScript基础知识总结2"/>
    <meta property="og:site_name" content="Yale"/>

    
    <meta property="og:image" content="undefined"/>
    

    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="alternate" href="/atom.xml" title="Yale" type="application/atom+xml">
    <link rel="stylesheet" href="/css/lib/materialize.min.css">
    <link rel="stylesheet" href="/css/lib/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">

    
        <link rel="stylesheet" href="/css/lib/prettify-tomorrow-night-eighties.css" type="text/css">
    
    <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>


<body>
    <nav class="orange">
    <div class="nav-wrapper">
        <a href="#" data-activates="main-menu" class="button-collapse">
            <i class="fa fa-navicon"></i>
        </a>
        <div class="">
            <a href="/" class="brand-logo hide-on-med-and-down">Yale</a>
            <ul class="right hide-on-med-and-down">
                
                    <li>
                        <a class="menu-home " href="/" >
                            <i class="fa fa-home "></i>
                            
                            首页
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-archive " href="/archives" >
                            <i class="fa fa-archive "></i>
                            
                            归档
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                            <i class="fa fa-bookmark "></i>
                            
                            分类
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-reading " href="/reading" >
                            <i class="fa fa-book "></i>
                            
                            读书
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-about " href="/about" >
                            <i class="fa fa-user "></i>
                            
                            关于
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-search modal-trigger " href="#search" >
                            <i class="fa fa-search "></i>
                            
                            搜索
                        </a>
                    </li>
                
            </ul>
            <div>
    <ul class="side-nav indigo darken-1" id="main-menu">
        
        <li class="side-user">
            <div class="row">
                <div class="col s4 no-padding">
                    <img class="avatar-image circle responsive-img" src="http://ww2.sinaimg.cn/small/74990035jw1f1rjkd681bj20rs0rsdhg.jpg" alt="User Avatar">
                </div>
                <div class="info col s8 valign-wrapper no-padding">
                    <div class="valign">
                        <p class="name">Yale</p>
                        <p class="desc">Web前端/Nodejs/技术宅</p>
                    </div>
                </div>
            </div>
        </li>
        

        
            <li class="no-padding">
                <a class="waves-effect menu-home " href="/" >
                    <i class="fa fa-home "></i>
                    
                    首页
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-archive " href="/archives" >
                    <i class="fa fa-archive "></i>
                    
                    归档
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                    <i class="fa fa-bookmark "></i>
                    
                    分类
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-reading " href="/reading" >
                    <i class="fa fa-book "></i>
                    
                    读书
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-about " href="/about" >
                    <i class="fa fa-user "></i>
                    
                    关于
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-search modal-trigger " href="#search" >
                    <i class="fa fa-search "></i>
                    
                    搜索
                </a>
            </li>
        
    </ul>

    <ul class="side-nav indigo darken-1" id="category-menu">
    

            

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/CSS3/">
                    CSS3 <span class="right">3 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/CSS3笔记/">
                    CSS3笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/Flex学习笔记/">
                    Flex学习笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/CSS3/SVG/">
                    SVG <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/HTML5/">
                    HTML5 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/HTML5/HTML5笔记/">
                    HTML5笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/Javascript/">
                    Javascript <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/Javascript/JavaScript基础知识总结1/">
                    JavaScript基础知识总结1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/Javascript/JavaScript基础知识总结2/">
                    JavaScript基础知识总结2 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/WebSocket/">
                    WebSocket <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/WebSocket/WebSocket实例运用/">
                    WebSocket实例运用 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/学习随想/">
                    学习随想 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/学习随想/学习随想1/">
                    学习随想1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/ES6/">
                    ES6 <span class="right">3 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/ES6/ES6中数组和函数的扩展/">
                    ES6中数组和函数的扩展 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/ES6/ES6中变量声明、解构赋值、模版字符串/">
                    ES6中变量声明、解构赋值、模版字符串 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/微信小程序/">
                    微信小程序 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/微信小程序/微信小程序笔记/">
                    微信小程序笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/nodejs/">
                    nodejs <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/nodejs/nodejs笔记1/">
                    nodejs笔记1 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/常用软件下载地址/">
                    常用软件下载地址 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/常用软件下载地址/软件下载地址/">
                    软件下载地址 <span class="right">1 篇</span></a>
                </a>
            </li>

        

    </ul>
</div>

        </div>
    </div>
</nav>

<div id="search" class="modal search-modal">
    <div class="row">
        <div class="input-field col s12">
              <input id="search-input" type="text">
              <label for="search-input">搜索</label>
        </div>

    </div>
    <div id="search-result" class="search-result col s12">

    </div>
</div>


    <main>
        <div class="container main-container">
    <nav class="page-nav hide-on-small-only">
    <div class="nav-wrapper indigo">
        <span class="breadcrumb">当前位置（分类目录）</span>
        
            
    
    
    <a class="breadcrumb" href="/categories/Javascript/">Javascript</a><a class="breadcrumb" href="/categories/Javascript/JavaScript基础知识总结2/">JavaScript基础知识总结2</a>


        

        
    </div>
</nav>

<article>
    <div class="card">
        <div class="card-content">
            

            <div class="article-title">
                
    
        <h1>JavaScript基础知识总结2</h1>
    


            </div>
            <time class="pink-link-context" datetime="2015-09-27T16:00:00.000Z"><a href="/2015/09/28/JavaScript基础知识总结2/">2015-09-28</a></time>

            <span id="busuanzi_container_page_pv" class="read-times-container">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_page_pv"></span>
</span>

            
    <div class="tags-row">
        
            <a href="/tags/JavaScript总结/" class="chip pink lighten-1">JavaScript总结</a>
        
    </div>


            <div class="toc pink-link-context hide-on-med-and-down">
    <ol class="section table-of-contents"><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#作用域链"><span class="section table-of-contents-text">作用域链</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#js执行的过程"><span class="section table-of-contents-text">js执行的过程</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#词法作用域"><span class="section table-of-contents-text">词法作用域</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-4"><a class="section table-of-contents-link" href="#详解预解析的过程"><span class="section table-of-contents-text">详解预解析的过程</span></a></li></ol></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#闭包"><span class="section table-of-contents-text">闭包</span></a></li></ol></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#原型链"><span class="section table-of-contents-text">原型链</span></a></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#函数的四种调用方式"><span class="section table-of-contents-text">函数的四种调用方式</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-4"><a class="section table-of-contents-link" href="#四种函数调用方式的this指向及其返回值"><span class="section table-of-contents-text">四种函数调用方式的this指向及其返回值</span></a></li></ol></li></ol></li></ol>
</div>


            <div class="entry pink-link-context">
                <p>想要真正弄懂javascript，那么就需要对javascript的两条链有清晰的认识，即作用域链与原型链，下面就对作用域链和原型链进行探讨…<br><a id="more"></a></p>
<p>想要真正弄懂javascript，那么就需要对javascript的两条链有清晰的认识，即作用域链与原型链，下面就对其进行探讨：</p>
<h2 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h2><p>   作用域就是一个变量或函数能被访问和使用的空间区域，也就是只有在这个区域变量或函数才能被使用，javascript中没有块级作用域（块级作用域在其他编程语言中是用{}表示），在javascript中只有全局作用域和用函数来划分空间的局部作用域。其实作用域就像是一个立方体的盒子，一个小盒子能访问到它自身以及包裹它的大盒子内的变量和函数，而大盒子内的其他和小盒子无关的盒子是无法对小盒子内部的变量和函数进行访问的。</p>
<ul>
<li>全局作用域：全局作用域是在任何地方变量或函数都能被访问到</li>
<li>局部作用域：局部作用于是只有在函数内部才能被访问的到的（先不说闭包时的情形）</li>
</ul>
<h3 id="js执行的过程"><a href="#js执行的过程" class="headerlink" title="js执行的过程"></a>js执行的过程</h3><ul>
<li>词法分析</li>
<li>语法分析</li>
<li>执行代码</li>
</ul>
<h3 id="词法作用域"><a href="#词法作用域" class="headerlink" title="词法作用域"></a>词法作用域</h3><p>a、<strong>在代码中只有函数可以限定作用范围，允许函数访问外部的变量</strong></p>
<p>b、<strong>在函数内优先访问内部声明的变量，如果没有才会访问外部的</strong></p>
<p>c、<strong>所有变量的访问规则，按照预解析规则来访问</strong></p>
<h4 id="详解预解析的过程"><a href="#详解预解析的过程" class="headerlink" title="详解预解析的过程"></a>详解预解析的过程</h4><p>   javascript代码执行之前会先进行预解析，预解析的时候会先对变量进行声明，对于声明式的函数会对函数进行声明并赋值，预解析时的规则如下：</p>
<ul>
<li><strong>对于变量的声明，查找当前作用域中是否有该变量，如果没有就在当前的作用域中添加该变量</strong></li>
<li><strong>对于函数的声明，也是像声明变量一样，如果没有这个函数名的变量，就往该作用域中添加该变量，然后给它赋值</strong></li>
<li><p><strong>对于函数的表达式的声明就像声明变量的时候一样，如果这个作用域中没有这个变量，就往<br>当前的作用域中声明这个变量，不用对其进行赋值。</strong> </p>
<p>举例说明:</p>
<p>1、先从简单的开始：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">console.log(num);    //undefined</div><div class="line">var num=123;</div><div class="line">console.log(num);    //123</div></pre></td></tr></table></figure>
<p>为什么结果会不一样呢，就是因为预解析，代码执行之前浏览器会对javascript进行预解析，浏览器会先把用var关键字生命的变量或函数进行解析，执行之前就对 num进行了声明但是没有赋值所以此时num = undefined,所以当代码开始执行的时候第一次没有赋值打印到控制台就是undefined，执行到第二句的时候对num进行了赋值使得num = 123;所以执行第三句的 时候num是有值的，所以控制台打印的是123；</p>
<p>2、看一下函数内部的预解析</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">function foo()&#123;</div><div class="line">    console.log(num); // undefined</div><div class="line">    var num=123;</div><div class="line">    console.log(num); // 123</div><div class="line">&#125;</div><div class="line">foo();</div></pre></td></tr></table></figure>
<p>在函数内部是一个独立的完整的作用域结构(函数内部也会有一次预解析过程),这个和上面的预解析过程是一样的只不过这题中的变量是声明在函数的内部，所以是局部变量，而上一题的变量不在函数内部所以是全局变量。</p>
<p>3、函数嵌套</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">function foo()&#123;</div><div class="line">    function func()&#123;</div><div class="line">        console.log(num) //undefined</div><div class="line">        var num=123;</div><div class="line">        console.log(num); //123</div><div class="line">    &#125;</div><div class="line">    func();</div><div class="line">&#125;</div><div class="line"></div><div class="line">foo();</div></pre></td></tr></table></figure>
<p>这个的预解析就有些麻烦了分为以下几步：</p>
<ul>
<li>对外层函数foo进行预解析。首先会在foo所在的作用域声明一个变量foo，对于声明式函数，会对foo赋值，即在预解析的时候会将函数体赋给变量foo。</li>
<li>对内层函数func进行预解析，会在foo内声明一个func的变量，由于内层函数是声明式函数，所以预解析时会将函数体赋值给变量func</li>
<li>预解析时会在内层函数func内部声明局部变量num,变量在预解析的时候是不会对其进行赋值的，<br>所以刚开始num = undefined;</li>
<li>预解析完之后就是执行了，按照从上到下开始执行。</li>
</ul>
<p>4、同一作用域变量与函数重名的情况</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">console.log(typeof a); //&quot;function&quot;</div><div class="line">var a = 10;</div><div class="line">function a()&#123;&#125;</div><div class="line">console.log(typeof a); //&quot;number&quot;</div><div class="line"></div><div class="line">console.log(typeof a1); //&quot;function&quot;</div><div class="line">function a1()&#123;&#125;</div><div class="line">var a1 = 10;</div><div class="line">console.log(typeof a1); //&quot;number&quot;</div><div class="line"></div><div class="line">console.log(typeof b); //&quot;undefined&quot;</div><div class="line">var b = 5;</div><div class="line">var b = function()&#123;&#125;;</div><div class="line">console.log(typeof b); //&quot;function&quot;</div></pre></td></tr></table></figure>
<p>上面分了两种情形，一种是声明式函数，一种是函数表达式，预解析的时候会产生不同的结果，对于声明式函数预解析的时候会对变量进行赋值(函数体赋值给变量是在所有的变量都预解析声明完之后，<br>所以a和a1的执行结果是一样的)，而函数表达式预解析的时候和变量是一样的只是声明变量而不进行<br>赋值。同一作用域下的同名变量只在预解析的时候声明一次。</p>
</li>
</ul>
<h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><p>什么是闭包？</p>
<ul>
<li>闭包就是函数能够引用独立变量（变量能够使用，但是被定义在封闭的区域内），换句话说，这些函数记住了创建它们时的环境</li>
</ul>
<p>例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">function makeAdder(x) &#123;</div><div class="line">  return function(y) &#123;</div><div class="line">    return x + y;</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line">var add5 = makeAdder(5);</div><div class="line">var add10 = makeAdder(10);</div><div class="line"></div><div class="line">console.log(add5(2));  // 7</div><div class="line">console.log(add10(2)); // 12</div></pre></td></tr></table></figure>
<p>一个闭包包含了两种东西：一个是函数，另一个是创建函数时的环境，每创建一次就会有对应的环境，各个环境之间不会产生影响。结合上面的例子予以说明：</p>
<ul>
<li>当makeAdder(5)执行的时候，一个函数function(y)(){}被创建，此时x=5就是函数被创建时的环<br>境，然后把创建的函数赋值给了add5;当makeAdder(10)执行的时候，一个函数function(y)(){}被创建，此时x=10就是函数被创建时的环境，然后把创建的函数赋值给了add10,此时有两个<br>函数被创建，两个函数被创建时的环境是不同的，他们的环境不会相互影响。</li>
<li>当add5(2)执行的时候，由于add5函数的环境中x=5,所以结果为7</li>
<li>当add10(2)执行的时候，由于add5函数的环境中x=2,所以结果为12</li>
</ul>
<h2 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h2><ul>
<li>面向对象的编程思想</li>
</ul>
<p>面向对象其实就是先把不同的方法、属性进行封装，现在可以拿来即用，不用明白那些方法、属性都做了什么，用到什么功能用对象调用即可。</p>
<ul>
<li>对象的创建</li>
</ul>
<p>创建对像使可以用new 构造函数()来进行创建，一个对象的功能并不是所有都是自身所具有的，很对都是<br>由继承而来的功能。</p>
<ul>
<li>为什么要用继承</li>
</ul>
<p>如果所有的功能都写在构造函数上，那么每创建一个函数就会为所有的功能函数开辟新的空间，这样会造成内存空间的浪费。而如果将功能写在构造函数的原型属性上，对象创建的时候，只需为构造函数原型属性上的功能开辟一块共用的空间，这样不会造成内存空间的浪费。</p>
<p>举例说明：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">function Student()&#123;</div><div class="line">    this.say = function()&#123;</div><div class="line">        console.log(&quot;hello&quot;);</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">var s1 = new Student();</div><div class="line">var s2 = new Studen</div><div class="line"></div><div class="line">console.log(s1.say == s2.say); //false</div><div class="line"></div><div class="line">function People()&#123;&#125;</div><div class="line">People.prototype.say = function()&#123;</div><div class="line">    console.log(&quot;hello&quot;);</div><div class="line">&#125;</div><div class="line">var p1 = new People();</div><div class="line">var p2 = new Peopl</div><div class="line"></div><div class="line">console.log(p1.say == p2.say); //true</div></pre></td></tr></table></figure>
<ul>
<li>原型对象</li>
</ul>
<p>实例的原型对象其实就是构造函数的原型属性，每个对象都有原型对象，原型对象中有constructor它是指向实例的构造函数的。</p>
<p>-关于继承，什么能继承，什么不能继承？</p>
<p> 当函数当作构造函数进行调用时，每new一次就会开辟一块空间用于存放构造函数中给予实例的属性和<br> 方法即用this.属性名/方法名的属性和方法（如果构造函数中有私有的属性，即直接通过var声明的，没<br> 有用this.的，这些属性和方法，实例是没有办法直接访问到这些属性和方法，但是如果构造函数中如果<br> 有this.方法名的方法中用到了这些属性和方法 ，这种情况就使的实例能够访问到这些属性和方法， 这是由于形成了闭包）,由此可知对于继承，继承过来的要么是从构造函数那里用this.属性名/函数名定义的属性/方法,要么是从原型对象上继承过来的。</p>
<p> 函数的六种继承：关于继承其实就是函数内this指向问题</p>
<p>   1、扩展原型对象实现继承</p>
<pre><code>因为用new创建对象就会开辟不同的空间，若是多个对象都具有的相同的函数都定义在构造函数里面的话，每创建一个对象就会在那个对象中有那个函数，并且相同的函数功能，却不是指向同一块内存，这样会造成内存的浪费，因此将相同功能的函数定义在构造函数的原型属性里面，这样不同的对象的相同功能的函数就指向同一个内存空间，有利于节省内存空间，构造函数和原型对象中的this指向的是实例
</code></pre><p>   2、替换原型对象实现继承</p>
<pre><code>对于往原型对象中扩展多个方法，代码就变得非常多，这是利用替换原型对象有利于简化代码，但是替换原型对象实现继承的时候一定要在原型对象中添加constructor,原型对象中的this指向的是构造函数的实例。
</code></pre><p>   3、混入实现继承</p>
<pre><code>混入实现继承是一个对象复制了另一个对象上的方法或属性，这样这个对象就具有了相应的属性和方法，所以能调用这些属性和方法的还是这个对象。
</code></pre><p>   4、原型+混入实现继承</p>
<pre><code>这种继承方式是将一个对象的属性和方法复制到一个构造函数的原型上，从而使构造函数创建的实例能够继承这些方法，因为原型中的this是指向构造函数的实例的。
</code></pre><p>   5、经典继承</p>
<pre><code>经典继承是将一个构造函数的原型对象直接等于一个对象，原型中的this也是指向构造函数的实例，使实例能够调用原型对象中的方法。
</code></pre><p>   6、上下文实现继承</p>
<pre><code>使用上下文实现继承实际上就是使一个构造函数的this指向另一个构造函数，使另一个构造函数的实例能够调用那个构造函数的方法和属性。
</code></pre><ul>
<li>原型链图</li>
</ul>
<p><img src="/images/prototype-chain.png" alt="prototype-chain"></p>
<h2 id="函数的四种调用方式"><a href="#函数的四种调用方式" class="headerlink" title="函数的四种调用方式"></a>函数的四种调用方式</h2><p>第一种模式：函数调用模式，也就是写一个函数，然后调用一下</p>
<p>第二种模式：方法调用模式，也就是将函数成为对象的一个方法，然后通过对象来调用</p>
<p>第三种模式：构造函数调用模式，也就是将函数当成构造函数来调用</p>
<p>第四种调用模式：上下文调用模式，</p>
<h4 id="四种函数调用方式的this指向及其返回值"><a href="#四种函数调用方式的this指向及其返回值" class="headerlink" title="四种函数调用方式的this指向及其返回值"></a>四种函数调用方式的this指向及其返回值</h4><ul>
<li>函数调用模式中this指向window，返回值由return语句决定</li>
<li>方法调用模式中this指向调用的对象，返回值由return语句决定</li>
<li>构造函数调用模式中this指向构造函数的实例返回值分为一下几种情况<ul>
<li>如果构造函数没有手动设置返回值，那么会返回构造函数的实例</li>
<li>如果手动给构造函数添加了返回值，有以下2种情况：<ul>
<li>返回值是值类型：最终的返回值还是构造函数的实例</li>
<li>返回值是引用类型(对象)：最终的返回值就是该对象</li>
</ul>
</li>
</ul>
</li>
<li>上下文调用模式fn.call(函数内部的this的值,实参1，实参2.。。)分为一下几种情形<ul>
<li>如果call方法的第一个参数是一个对象，则fn函数内部的this的值指向该对象</li>
<li>如果call方法的第一个参数是一个字符串、数字、布尔值，则fn函数内部的this的值会转换为该类型所对应的基本包装类型的对象</li>
<li>如果call方法的第一个参数是null，则fn函数内部的this的值是window——&gt;就相当于是一次函数调用模式</li>
</ul>
</li>
</ul>

                
<p class="pink-link-context">
    <a href="/2015/10/12/HTML5笔记/" rel="next" title="HTML5笔记">
    上一篇：HTML5笔记
  </a>
</p>



<p class="pink-link-context">
    <a href="/2015/09/24/JavaScript基础知识总结1/" rel="next" title="JavaScript基础知识总结1">
    下一篇：JavaScript基础知识总结1
  </a>
</p>


            </div>
			
        </div>
    </div>
</article>




    <section id="comment">
        <!-- 多说评论框 start -->
        <div id="ds-thread" class="ds-thread" data-thread-key="2015/09/28/JavaScript基础知识总结2/" data-title="JavaScript基础知识总结2" data-url="http://yalesuperman.oschina.io/2015/09/28/JavaScript基础知识总结2/"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var pathname = location.pathname;

    var duoshuoQuery = {short_name:"yalesuperman"};
        (function() {
            if(pathname === '/about/') {
                return;
            }
            var ds = document.createElement('script');
            ds.type = 'text/javascript';ds.async = true;
            ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0] 
             || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
        </script>
    <!-- 多说公共JS代码 end -->

    </section>



</div>

        <div class="fixed-action-btn float-sitemap">
    <a class="btn-floating btn-large pink">
      <i class="fa fa-caret-square-o-up"></i>
    </a>
    <ul>
      <li><a class="btn-return-top btn-floating waves-effect green" title="回到顶部"><i class="fa fa-arrow-circle-o-up"></i></a></li>
      <li><a class="btn-floating waves-effect button-collapse yellow darken-1"  data-activates="main-menu" title="menu"><i class="fa fa-navicon"></i></a></li>
    </ul>
  </div>

    </main>
    <footer class="page-footer black darken-1">
    
    <div class="container">
        <div class="row">
            
            <div class="social-group col m4 s12">
                <h5 class="white-text">社交</h5>
                
                    <a class="social-link" href="https://github.com/NotsayJustdo" target="_blank">
                        <i class="fa fa-2x fa-github"></i>
                    </a>
                
                    <a class="social-link" href="" target="_blank">
                        <i class="fa fa-2x fa-rss"></i>
                    </a>
                
                <div class="site-visitors-container white-text">
                    <span>
                        <i class="fa fa-user"></i>
                        <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
                    </span>
                    <span>&nbsp;|&nbsp;</span>
                    <span>
                        <i class="fa fa-eye"></i>
                        <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
                    </span>
                </div>
            </div>
            

            
        </div>
    </div>
    

    <div class="footer-copyright pink-link-context">
        <div class="container">
            © 2016 yalesuperman, All rights reserved.
            <p class="right" style="margin-top: 0;">本博客由 <a href="https://hexo.io">Hexo</a> 强力驱动 | 主题 <a href="https://github.com/raytaylorlin/hexo-theme-raytaylorism">raytaylorism</a></p>
        </div>
    </div>
</footer>


    <noscript>
    <div class="noscript">
        <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
    </div>
</noscript>
<div class="noscript">
    <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
</div>


<script src="/js/jquery.min.js"></script>
<script src="/js/materialize.min.js"></script>
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<script>
    (function($) {
        $(document).ready(function() {
            // 隐藏禁用javascript（针对微信内置浏览器）的提示
            $('.noscript').hide();

            // 图片缩放效果
            var $imgs = $('img').not('.slider-image').not('.avatar-image').not('.carousel-image').not('.card-cover-image').not('.qrcode');

            // 给图片加上点击放大效果（materialbox插件）
            $imgs.addClass('materialboxed').each(function(i, el) {
                $(this).attr('data-caption', $(this).attr('alt') || ' ');
            }).materialbox();

            // 优化表格的显示
            $('table').each(function() {
                var $table = $(this);
                // 除去多行代码的情况
                if ($table.find('pre').length == 0) {
                    $table.addClass('responsive-table striped bordered');
                }
            });

            // 首页幻灯片
            $('.slider').slider({indicators: false, full_width: true, interval: 8000});

            $(".button-collapse").sideNav();
            $(".category-menu").sideNav();

            // 针对gallery post
            $('.carousel').carousel({full_width: true});
            $('.carousel-control.prev').click(function() {
                $('.carousel').carousel('prev');
            });
            $('.carousel-control.next').click(function() {
                $('.carousel').carousel('next');
            });

            // 文章目录
            $('article').not('.simple-article').find('h1').add('h2').add('h3').add('h4').add('h5').add('h6').scrollSpy();

            // 目录随屏幕滚动（防止目录过长越过footer）
            var $toc = $('.toc');
            var scrollTargetTop = 0;
            $(window).scroll(function() {
                var $activeLink = $toc.find('a.active.section');
                if ($(window).scrollTop() < 100) {
                    scrollTargetTop = 0;
                } else {
                    if ($activeLink[0]) {
                        scrollTargetTop = $activeLink.offset().top - $toc.offset().top;
                    }
                }
                $toc.css('top', '-' + scrollTargetTop + 'px');
            });

            // 修正文章目录的left-border颜色
            var color = $('.table-of-contents-text').css('color');
            $('.table-of-contents-link').css('border-left-color', color);

            // 针对移动端做的优化：FAB按钮点击一下收回
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                $('.fixed-action-btn').addClass('click-to-toggle');
            }
            // 回到顶部
            $('.btn-return-top').click(function() {
                $('body, html').animate({
                    scrollTop: 0
                }, 500);
            });

            // 重置读书页面的Tab标签页的颜色
            $('li.tab a').hover(function() {
                $(this).toggleClass('text-lighten-4');
            });
            $('.indicator').addClass('pink lighten-2');

            
            // 添加new标签
            $('.menu-reading, .menu-about').append('<span class="new badge pink"></span>');
            

            // 搜索功能
            $('.modal-trigger').leanModal({
                // 打开搜索框时自动聚焦
                ready: function() {
                    if ($('#search').is(":visible")) {
                        $('#search-input').focus();
                    }
                }
            });
            var searchXml = "search.xml";
            if (searchXml.length == 0) {
             	searchXml = "search.xml";
            }
            var searchPath = "/" + searchXml;
            initSearch(searchPath, 'search-input', 'search-result');
        });

        // 初始化搜索与匹配函数
        var initSearch = function(path, search_id, content_id) {
            'use strict';
            $.ajax({
                url: path,
                dataType: "xml",
                success: function(xmlResponse) {
                    // get the contents from search data
                    var datas = $("entry", xmlResponse).map(function() {
                        return {
                            title: $("title", this).text(),
                            content: $("content", this).text(),
                            url: $("url", this).text()
                        };
                    }).get();
                    var $input = document.getElementById(search_id);
                    var $resultContent = document.getElementById(content_id);
                    $input.addEventListener('input', function() {
                        var str = '<ul class=\"search-result-list\">';
                        var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                        $resultContent.innerHTML = "";
                        if (this.value.trim().length <= 0) {
                            return;
                        }
                        // perform local searching
                        datas.forEach(function(data) {
                            var isMatch = true;
                            var content_index = [];
                            var data_title = data.title.trim().toLowerCase();
                            var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                            var data_url = data.url;
                            var index_title = -1;
                            var index_content = -1;
                            var first_occur = -1;
                            // only match artiles with not empty titles and contents
                            if (data_title != '' && data_content != '') {
                                keywords.forEach(function(keyword, i) {
                                    index_title = data_title.indexOf(keyword);
                                    index_content = data_content.indexOf(keyword);
                                    if (index_title < 0 && index_content < 0) {
                                        isMatch = false;
                                    } else {
                                        if (index_content < 0) {
                                            index_content = 0;
                                        }
                                        if (i == 0) {
                                            first_occur = index_content;
                                        }
                                    }
                                });
                            }
                            // show search results
                            if (isMatch) {
                                keywords.forEach(function(keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    data_title = data_title.replace(regS, "<span class=\"search-keyword pink lighten-2\">" + keyword + "</span>");
                                });

                                str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                                var content = data.content.trim().replace(/<[^>]+>/g, "");
                                if (first_occur >= 0) {
                                    // cut out 100 characters
                                    var start = first_occur - 20;
                                    var end = first_occur + 80;
                                    if (start < 0) {
                                        start = 0;
                                    }
                                    if (start == 0) {
                                        end = 100;
                                    }
                                    if (end > content.length) {
                                        end = content.length;
                                    }
                                    var match_content = content.substring(start, end);
                                    // highlight all keywords
                                    keywords.forEach(function(keyword) {
                                        var regS = new RegExp(keyword, "gi");
                                        match_content = match_content.replace(regS, "<span class=\"search-keyword pink lighten-2\">" + keyword + "</span>");
                                    });

                                    str += "<p class=\"search-result\">..." + match_content + "...</p>"
                                }
                                str += "</li>";
                            }
                        });
                        str += "</ul>";
                        $resultContent.innerHTML = str;
                    });
                }
            });
        }
    })(jQuery);
</script>


<script src="/js/prettify.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("pre").addClass("prettyprint");
        prettyPrint();
    });
</script>






<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async
  src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>



</body>
</html>
